<template>
  <div>
    <input type="button" value="全国迁入" @click="moveInAll" />
    <input type="button" value="全国迁出" @click="moveOutAll" />
    <input type="button" value="武汉迁入" @click="moveIn" />
    <input type="button" value="武汉迁出" @click="moveOut" />
    <input type="button" value="删除迁徙图" @click="removeMigrationMap" />
    <input type="button" value="加载行政区划" @click="addAdminMap" />
    <input type="button" value="添加点1" @click="addPoint1" />
    <input type="button" value="删除点1" @click="removePoint1" />
    <input type="button" value="添加点2" @click="addPoint2" />
    <input type="button" value="删除点2" @click="removePoint2" />
    <input type="button" value="关闭弹框" @click="closePopup" />
    <input type="button" value="添加感染分布图" @click="addSickMap('000000')" />
    <input type="button" value="移除感染分布图" @click="removeSickMap" />
    <input type="button" value="显示感染分布图" @click="showSickMap" />
    <input type="button" value="隐藏感染分布图" @click="hideSickMap" />
    <input type="button" value="添加人口分布图" @click="addPopulationMap" />
    <input type="button" value="移除人口分布图" @click="removePopulationMap" />
    <input type="button" value="显示人口分布图" @click="showPopulationMap" />
    <input type="button" value="隐藏人口分布图" @click="hidePopulationMap" />
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import MapCommon from "@/util/MapCommon";
import CompreSituation from "./CompreSituation";
import { compreSituationServer } from "@/api/installServer";

@Component({
  name: "CompreSituationTest",
  components: {},
  mixins: [MapCommon]
})
export default class CompreSituationTest extends Vue {
  private mapId: string = "";
  private getComponent: any;
  private hospitalData = [
    {
      id: "753cae6ba85148c09193f7bce6bade41",
      name: "张三",
      longitude: 114.280102,
      latitude: 30.604387
    },
    {
      id: "753cae6ba85148c09193f7bce6bade42",
      name: "李四",
      longitude: 114.380102,
      latitude: 30.614387
    }
  ];
  private schoolData = [
    {
      id: "753cae6ba85148c09193f7bce6bade41",
      name: "张二",
      longitude: 114.380102,
      latitude: 30.624387
    },
    {
      id: "753cae6ba85148c09193f7bce6bade42",
      name: "李五",
      longitude: 114.370102,
      latitude: 30.684387
    }
  ];

  private mounted() {
    // 地图容器id
    this.mapId = "map";
    (this as any).resolveMap(this.mapId).then((data: any) => {
      this.init(data.map);
    });
  }

  //  地图加载完成后，初始化
  private init(map: any) {
    const temp: any = this;
    // 地图配置
    const mapConfig = temp.$ioc.resolve(`mapConfig-${this.mapId}`);
    // 符号配置
    const symbolConfig = temp.$ioc.resolve(`symbolConfig-${this.mapId}`);
    // 通用的地图组件实例
    const GISComponents = temp.$ioc.resolve(`GISComponents-${this.mapId}`);
    //
    const component = new CompreSituation({
      map,
      mapConfig,
      symbolConfig,
      simpleRenderMgr: GISComponents.simpleRenderMgr,
      popupManager: GISComponents.popupManager,
      PointGeometryBuilder: GISComponents.PointGeometryBuilder,
      featureLocate: GISComponents.featureLocate,
      featureHighlight: GISComponents.featureHighlight,
      service: compreSituationServer
    });
    component.load();
    component.getClusterComponent().on("compresituation_popup", (data: any) => {
      console.log(data);
      jQuery("#popup_compresituation_sjts").append(
        "<b>" + data.data.contactPerson + "</b>"
      );
    });
    this.getComponent = () => {
      return component;
    };

    /*  component.on('popup', (data: any) => {
      new Vue({
        el: '#' + data.containerId,
        template: '<b>{{text}}</b>',
        data(){
          return {
            text: data.data.id,
          };
        }
      });
    });*/
  }

  private moveIn() {
    // http://39.105.209.108:3001/beijing/ncov/pub/
    // sens/getMigrateMap?area_id=420100&date=2020-02-02&migrate_type=move_out1
    this.getComponent().addMigrationMap("420100", "2020-02-02", "move_in1");
  }

  private moveOut() {
    this.getComponent().addMigrationMap("420100", "2020-02-02", "move_out1");
  }

  private moveInAll() {
    this.getComponent().addMigrationMap("000000", "2020-02-02", "move_in1");
  }

  private moveOutAll() {
    this.getComponent().addMigrationMap("000000", "2020-02-02", "move_out1");
  }

  private removeMigrationMap() {
    this.getComponent().removeMigrationMap();
  }

  private addAdminMap() {
    this.getComponent().addAdminMap();
  }

  private addPoint1(pointArr: any, type: any) {
    this.getComponent().addPointByType("110000", "school");
    //  this.getComponent().addPointByType(this.schoolData,'school');
  }
  private removePoint1() {
    this.getComponent().removePointLayer();
  }
  private addPoint2(pointArr: any) {
    //  this.getComponent().addPointByType(this.hospitalData, 'hospital');
    this.getComponent().addPointByType("110000", "hospital");
  }
  private removePoint2() {
    this.getComponent().removePointLayer();
  }
  private closePopup() {
    this.getComponent().closePopup();
  }

  private addSickMap(districtCode: string) {
    this.getComponent().addSickMap(districtCode);
  }

  private removeSickMap() {
    this.getComponent().removeSickMap();
  }

  private addPopulationMap() {
    this.getComponent().addPopulationMap();
  }

  private removePopulationMap() {
    this.getComponent().removePopulationMap();
  }

  private showSickMap() {
    this.getComponent().showSickMap();
  }

  private hideSickMap() {
    this.getComponent().hideSickMap();
  }

  private showPopulationMap() {
    this.getComponent().showPopulationMap();
  }
  private hidePopulationMap() {
    this.getComponent().hidePopulationMap();
  }
}
</script>
<style lang="less" scoped></style>
